<template>
    <div>
        <!--语法 v-bind:属性名 = '变量名'-->
        <a v-bind:href="url">点击去百度</a>
        <img v-bind:src="imgurl" alt="" style="width: 80px; height: 80px;">
        <img :src="localImg" alt="" style="width: 80px; height: 80px;">
        <hr>
        <h2>改变文本的颜色</h2>
        <p :id="id">v-bind的绑定</p>
        <button @click="changeColor">改变id的颜色</button>
        <button @click="id='d2'">点击更改颜色</button>
    </div>

</template>
<script>
export default {
    data() { 
        return {
            //语法 v-bind:属性名 = '变量'
            //简写 :属性名 = '变量'   也叫语法糖
            url: 'https://www.baidu.com',
            imgurl:'https://img10.360buyimg.com/jdcms/s460x460_jfs/t1/235379/6/25243/82487/66d1ed21F412240a3/bc9f586c8c3ba278.jpg'
            , imgobj:'https://img10.360buyimg.com/jdcms/s460x460_jfs/t1/80033/28/27977/92968/66c035deF5a4f7271/126515c81afddff8.jpg'
            , localImg: this.imgurl,
            id:'d1',
        }
    },
    methods: {
        changeColor() { 
            this.id = 'd2'
        }
    }
}
</script>
<style scoped>
    #d1{
        color: pink;
        background-color: black;
    }
    #d2{
        color: red;
    }
</style>